<template>
  <el-main>
    <div class="mt-4">
      <el-row>
        <el-col :span="12">
          <el-input v-model="input2" style="max-width: 600px" placeholder="Please input">
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </el-col>

        <el-col :span="2" class="ml-2">
          <el-button plain @click="dialogVisible = true" type="primary">添加</el-button>
        </el-col>


      </el-row>
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="500"
      :before-close="handleClose"
    >
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="Activity name">
          <el-input v-model="form.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确认</el-button>
        </div>
      </template>
    </el-dialog>
    <el-table :data="tableData" style="width: 100%" >
      <el-table-column prop="uid" label="用户编号" width="180" />a
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="address" label="住址" width="180" />
      <el-table-column prop="telephone" label="联系方式" width="180" />
      <el-table-column prop="balance" label="余额" width="180" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default>
          <el-button link type="primary" size="small" @click="handleClick"
            >详情</el-button
          >
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p></p>
    <div class="pagination-container">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
  </el-main>
</template>

<script lang="ts" setup>
import { ref, reactive, defineComponent } from "vue";
import { ElMessageBox } from "element-plus";
import { Search, Document, Location, Setting } from "@element-plus/icons-vue";

const form = reactive({
  name: "",
});
const input1 = ref("");
const input2 = ref("");
const select = ref("");
const handleClick = () => {
  console.log("click");
};

const centerDialogVisible = ref(false)

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const tableData = [
  {
    uid: "1",
    name: "Tom",
    address: "No. 189",
    telephone: "123456789",
    balance: "100",
  },
  {
    uid: "2",
    name: "Tom",
    address: "No. 189",
    telephone: "123456789",
    balance: "100",
  },
  {
    uid: "3",
    name: "Tom",
    address: "No. 189",
    telephone: "123456789",
    balance: "100",
  },
  {
    uid: "4",
    name: "Tom",
    address: "No. 189",
    telephone: "123456789",
    balance: "100",
  },
];
</script>

<style>
.pagination-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 30px; /* 根据需要设置顶部边距 */
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>

<style scoped>
.mb-2 {
  margin-top: 60px;
  margin-left: 10px;
}
.avatar {
  border: #4d4343 solid 1px;
  width: 79%;
  display: flex;
  justify-content: flex-end;
}
.recharge{
  position: absolute;
  margin-top:0px;
  margin-left:900px;
  width:70px;
  height:40px;
}
</style>
